<template>
    <div>
        <!-- <h3>{{$store.getters.bigSum}}</h3> -->
        <!-- <h3>{{$store.state.sum}}</h3> -->
        <select v-model.number="n">
            <option value="1" >1</option>
            <option value="2" >2</option>
            <option value="3" >3</option>
        </select>
        <button @click="increase">+</button>
        <button @click="decrease">-</button>
        <button @click="increaseOdd">value是奇数再加</button>
        <button @click="increaseWait">等1s再加</button>
    </div>
</template>

<script>
    export default {
        name : "Count",
        data(){
            return {
                n:1,
                sum:0,
                school:"属性",
                subject:"",
            }
        },
        computed:{
            // sum(){
            //     return this.$store.state.sum
            // },
            //可以简写成如下
            //借助mapstate生成计算属性，从state里面读取数据
            ...mapState([
                'sum',
                'n',
                'school',
                'subject',
            ]),
            // bigSum(){
            //     return this.$getters.bigSum
            // },
            //可以简写成如下
            //借助mapGetters生成计算属性，从getters里面读取数据
            ...mapGetters([
                'bigSum',
            ])
        },
        methods:{
            increase(){
                console.log(this, '')
                this.$store.dispatch('increase',this.n)
            },
            decrease(){
                this.$store.dispatch('decrease',this.n)
            },
            increaseOdd(){
                if(this.$store.state.sum%2){
                    this.$store.dispatch('increase',this.n)
                }
            },
            increaseWait(){
                setTimeout(() => {
                    this.$store.dispatch('increase',this.n)
                }, 1000);
            },
        }
    }
</script>

<style scoped>
    button{
        margin : 5px;
    }
    select{
        margin : 5px;
    }
</style>